<template>
    <a-layout>
        <a-layout-header id="header">
            <div id="head-left">
                <router-link to="/" style="display: flex; justify-content: center; align-items: center;">
                    <HomeFilled :style="{ fontSize: '26px' }" id="home-icon" />
                </router-link>
                <div id="head-text">添加基地</div>
            </div>
            <LogoutOutlined :style="{ fontSize: '22px' }" id="logout-icon" @click="logout" />
        </a-layout-header>
        <a-layout-content style="margin: 20px 16px">
            <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
                <a-form :model="formState" name="horizontal_login" layout="vertical" autocomplete="off" id="main-form"
                    ref="formRef">
                    <div id="form-one">
                        <a-form-item style="text-align: start;" label="基地代码" name="baseCode"
                            :rules="[{ required: true, message: '请输入基地代码' }]">
                            <a-input v-model:value="formState.baseCode">
                                <template #prefix>
                                    <TagsOutlined class="site-form-item-icon" />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item style="text-align: start;" label="区域-中文" name="areaCNS"
                            :rules="[{ required: true, message: '请输入区域-中文' }]">
                            <a-input v-model:value="formState.areaCNS">
                                <template #prefix>
                                    <TagsOutlined class="site-form-item-icon" />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item style="text-align: start;" label="区域-英文" name="areaEN"
                            :rules="[{ required: true, message: '请输入区域-英文' }]">
                            <a-input v-model:value="formState.areaEN">
                                <template #prefix>
                                    <TagsOutlined class="site-form-item-icon" />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item style="text-align: start;" label="区域-中文繁体" name="areaCNC"
                            :rules="[{ required: true, message: '请输入区域-中文繁体' }]">
                            <a-input v-model:value="formState.areaCNC">
                                <template #prefix>
                                    <TagsOutlined class="site-form-item-icon" />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item style="text-align: start;" label="培训地点-中文" name="trainingLocationCNS">
                            <a-input v-model:value="formState.trainingLocationCNS">
                                <template #prefix>
                                    <TagsOutlined class="site-form-item-icon" />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item style="text-align: start;" label="培训地点-英文" name="trainingLocationEN">
                            <a-input v-model:value="formState.trainingLocationEN">
                                <template #prefix>
                                    <TagsOutlined class="site-form-item-icon" />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item style="text-align: start;" label="培训地点-中文繁体" name="trainingLocationCNC">
                            <a-input v-model:value="formState.trainingLocationCNC">
                                <template #prefix>
                                    <TagsOutlined class="site-form-item-icon" />
                                </template>
                            </a-input>
                        </a-form-item>
                    </div>
                    <div id="form-two">
                        <a-form-item style="text-align: start;" label="基地管理员ID-数字" name="baseAdmin"
                            :rules="[{ required: true, message: '请输入基地管理员ID' }]">
                            <a-input v-model:value="formState.baseAdmin">
                                <template #prefix>
                                    <TagsOutlined class="site-form-item-icon" />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item style="text-align: start;" label="培训基地-中文" name="baseCNS"
                            :rules="[{ required: true, message: '请输入培训基地-中文' }]">
                            <a-input v-model:value="formState.baseCNS">
                                <template #prefix>
                                    <TagsOutlined class="site-form-item-icon" />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item style="text-align: start;" label="培训基地-英文" name="baseEN"
                            :rules="[{ required: true, message: '请输入培训基地-英文' }]">
                            <a-input v-model:value="formState.baseEN">
                                <template #prefix>
                                    <TagsOutlined class="site-form-item-icon" />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item style="text-align: start;" label="培训基地-中文繁体" name="baseCNC"
                            :rules="[{ required: true, message: '请输入培训基地-中文繁体' }]">
                            <a-input v-model:value="formState.baseCNC">
                                <template #prefix>
                                    <TagsOutlined class="site-form-item-icon" />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item style="text-align: start;" label="基地描述-中文" name="baseCNSD">
                            <a-input v-model:value="formState.baseCNSD">
                                <template #prefix>
                                    <TagsOutlined class="site-form-item-icon" />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item style="text-align: start;" label="基地描述-英文" name="baseEND">
                            <a-input v-model:value="formState.baseEND">
                                <template #prefix>
                                    <TagsOutlined class="site-form-item-icon" />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item style="text-align: start;" label="基地描述-中文繁体" name="baseCNCD">
                            <a-input v-model:value="formState.baseCNCD">
                                <template #prefix>
                                    <TagsOutlined class="site-form-item-icon" />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item style="text-align: start;" name="baseCNCD">
                            <div id="submit-container">
                                <button id="save-button2" @click="onSubmit">
                                    <CheckOutlined />
                                    保存
                                </button>
                            </div>
                        </a-form-item>
                    </div>
                </a-form>
            </div>
        </a-layout-content>
        <a-layout-footer style="text-align: center">
            Front Third Group ©2023
        </a-layout-footer>
    </a-layout>
</template>

<style>
#main-form {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

#form-one {
    flex: 1;
}

#form-two {
    flex: 1;
}

#submit-container {
    display: flex;
    gap: 20px;
    width: 100%;
}

#save-button2 {
    height: 30px;
    width: 80%;
    border: none;
    color: white;
    background-color: rgb(0, 145, 17);
    font-weight: bold;
}

#header {
    background-color: white;
    display: flex;
    flex-direction: row;
    padding: 0px;
    align-items: center;
}

#head-left {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#home-icon {
    margin-left: 20px;
    margin-right: 20px;
    flex: 1;
}

#head-text {
    font-size: 18px;
    flex: 3
}

#logout-icon {
    flex: 10;
    display: flex;
    justify-content: end;
    padding-right: 30px;
}
</style>

<script setup>
import {
    TagsOutlined, CheckOutlined,
    HomeFilled,
    LogoutOutlined
} from '@ant-design/icons-vue';

import { reactive, ref, toRaw } from 'vue';
import apiFunction from '../api/api.js'
const logout = apiFunction.logout

const formRef = ref();
// import { ref } from 'vue';
// 基地详细信息，我们之后通过 axios 获取数据进行填充
const formState = reactive({
    baseCode: '',
    areaCNS: '',
    areaEN: '',
    areaCNC: '',
    trainingLocationCNS: '',
    trainingLocationEN: '',
    trainingLocationCNC: '',
    baseAdmin: '',
    baseCNS: '',
    baseEN: '',
    baseCNC: '',
    baseCNSD: '',
    baseEND: '',
    baseCNCD: '',
});

const onSubmit = () => {
    formRef.value
        .validate()
        .then(() => {
            console.log("如果验证成功，也就是必填写的值都填写了，就会执行这段函数")
            // console.log('values', formState, toRaw(formState));
            // TODO 我们需要在前端安全的保存登录
            let baseInfo = toRaw(formState)
            let requestBody = {
                No: baseInfo.baseCode,
                Area: baseInfo.areaCNS,
                AreaZhTw: baseInfo.areaCNC,
                AreaEnUs: baseInfo.areaEN,
                TrainingBase: baseInfo.baseCNS,
                TrainingBaseEnUs: baseInfo.baseEN,
                TrainingBaseZhTw: baseInfo.baseCNC,
                Address: baseInfo.trainingLocationCNS,
                AddressEnUs: baseInfo.trainingLocationEN,
                AddressZhTw: baseInfo.trainingLocationCNC,
                Describe: baseInfo.baseCNSD,
                DescribeEnUs: baseInfo.baseEND,
                DescribeZhTw: baseInfo.baseCNCD,
                PersonId: baseInfo.baseAdmin
            }

            let headersList = {
                "Accept": "*/*",
                "Content-Type": "application/json"
            }

            let bodyContent = JSON.stringify(requestBody);

            fetch("https://localhost:44305/api/Base/AddBase", {
                method: "POST",
                body: bodyContent,
                headers: headersList
            }).then(response => {
                console.log(response)
                //服务端最好添加一些响应信息，给前端程序一些反馈
            })

            console.log(requestBody)
            alert("提交了表格")
        })
        .catch(error => {
            console.log("还有一些必填属性未填写")
            console.log('error', error);
        });
};

</script>
